import React, { useEffect, useState, useRef } from 'react';
import styles from './cart.less';
import {
  AutoSizer,
  List,
  WindowScroller,
  CellMeasurerCache,
  CellMeasurer,
} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
import { Checkbox, Divider, Button } from 'antd';
const CheckboxGroup = Checkbox.Group;
import cart from './query.json';

const cache = new CellMeasurerCache({
  defaultHeight: 50,

});

export default function() {
  const [cartList, setCartList] = useState([]);

  function onchange(index) {
    console.log('index', index);
  }

  useEffect(() => {
    console.time('cart数据扁平化耗时');
    const result = cart.data.cartItemList.reduce((total, cur) => {
      total.push(cur);
      Array.prototype.push.apply(total, cur.cartSkuInfoList);
      return total;
    }, []);
    setCartList(result);
    console.timeEnd('cart数据扁平化耗时');
    console.log('result',result)
  }, []);

  useEffect(()=>{

    // We will only run measureAllRows if they have not been
    // measured yet. An easy way to check is to see if the
    // last row is measured
    const lastRowCache = cache._rowHeightCache[`${cartList.length - 1}-0`];


    if (listRef
      || lastRowCache === null
      || lastRowCache === undefined
      || lastRowCache === 0) {
      try {
        console.log('lastRowCache：：：：',listRef)
        listRef.measureAllRows();
      } catch {
        console.log('failed to measure all rows');
      }
    }
  },[cartList])



  function rowRenderer({ columnIndex, key, index, style, parent }) {

    const rowCache = cache._rowHeightCache[`${index}-0`];
 
    if (rowCache !== null && rowCache !== undefined && rowCache !== 0) {
      return (Array.isArray(cartList[index]?.cartSkuInfoList) ? (
        <div    className={styles.mainCeil} key={key}  style={{...style, background: 'red' }} onClick={onchange.bind(null,index)}>
         <p> {cartList[index]?.cartPerformance?.eventNameSc}</p>
         <p> {cartList[index]?.cartPerformance?.eventNameSc}</p>
         father
         <img src={cartList[index]?.cartPerformance?.performancePoster} alt="" />
         <p>1</p>
         <p>2</p>
        </div>
      ) : (
        <div   className={styles.cell}  style={style} key={key}  index={index}>
          {cartList[index]?.showTicketTypeNameSc}
        </div>
      ));
    }

    return (
  
        <CellMeasurer
          cache={cache}
          columnIndex={0}
          key={key}
          parent={parent}
          rowIndex={index}
        >
          {() => (
                 Array.isArray(cartList[index]?.cartSkuInfoList) ? (
                  <div   className={styles.mainCeil} key={key}  style={{...style, background: 'red' }} onClick={onchange.bind(null,index)}>
                   <p> {cartList[index]?.cartPerformance?.eventNameSc}</p>
                   <p> {cartList[index]?.cartPerformance?.eventNameSc}</p>
                   father
                   <img src={cartList[index]?.cartPerformance?.performancePoster} alt="" />
            
                   <p>1</p>
         <p>2</p>
                  </div>
                ) : (
                  <div    className={styles.cell} style={style} key={key}  index={index}>
                    {cartList[index]?.showTicketTypeNameSc}
                  </div>
                )
          )}
        </CellMeasurer>
    
    );
  }
  let listRef =useRef()
  return (
<List
 
 height={document.body.clientHeight}
 columnWidth={document.body.clientWidth}
 width={document.body.clientWidth}
 deferredMeasurementCache={cache}
 rowCount={cartList.length}
 rowRenderer={rowRenderer}
 rowHeight={cache.rowHeight}
 style={{ outline: 'none' }}
 ref={(r) => { listRef = r; }}
/>

  );
}

    
